<template>
	<view>
		<view v-show="!showPopup">
			<map style="width: 100%; height: 95vh;" :layer-style='1' :show-location='true' :latitude="latitude"
				:longitude="longitude" show-compass :markers="markers" :scale="scale" @markertap="markertap"
				@callouttap="callouttap" show-location>
			</map>
			<view style="width: 100%; height: 5vh; padding:5px;margin: 5px;">
				<u-checkbox-group v-model="checkedList" placement="row" @change="handle_checkedList_change">
					<u-checkbox :label="numberofJLY" active-color="#d81e06" name="敬老院"></u-checkbox>
					<u-checkbox :label="numberofCSYLY" active-color="#1296db" name="城市养老院"></u-checkbox>
					<u-checkbox :label="numberofNCYLY" active-color="#2aa515" name="农村养老院"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<u-modal :show="showPopup" @confirm="handle_modal_close" title="机构详情">
			<view class="slot-content">
				<u-cell-group>
					<u-cell title="统一社会信用代码" :value="detailform.taxId"></u-cell>
					<u-cell title="单位类型" :value="detailform.enterInstType"></u-cell>
					<u-cell title="单位名称" :value="detailform.enterInstName"></u-cell>
					<u-cell title="单位建立日期" :value="detailform.establishDate"></u-cell>
					<u-cell title="行政区划名称" :value="detailform.areaName"></u-cell>
					<u-cell title="单位通信详细地址" :value="detailform.instAdd"></u-cell>
					<!-- <u-cell title="法定代表人或负责人姓名" :value="detailform.principal"></u-cell> -->
					<!-- 					<u-cell title="法定代表人或负责人联系方式" :value="detailform.principalContact"></u-cell>
					<u-cell title="法定代表人或负责人证件类型" :value="detailform.principalCredType"></u-cell>
					<u-cell title="法定代表人或负责人证件号码" :value="detailform.principalCredId"></u-cell>
					<u-cell title="法人登记机关" :value="detailform.principalRegBureau"></u-cell>
					<u-cell title="法人类型" :value="detailform.principalType"></u-cell> -->
					<u-cell title="床位总数量" :value="detailform.totalBeds"></u-cell>
					<u-cell title="全托床位数量" :value="detailform.totalCareBeds"></u-cell>
					<u-cell title="日托床位数量" :value="detailform.dayCareBeds"></u-cell>
					<u-cell title="护理型床位数量" :value="detailform.nursingBeds"></u-cell>
					<u-cell title="建筑面积" :value="detailform.structionArea"></u-cell>
					<u-cell title="占地面积" :value="detailform.coveredArea"></u-cell>
					<u-cell title="场所性质" :value="detailform.placeProp"></u-cell>
					<!-- <u-cell title="是否通过消防部门审验合格" :value="detailform.fireQualified"></u-cell>
					<u-cell title="未通过消防部门审验合格原因" :value="detailform.fireUnqualifiedReason"></u-cell>
					<u-cell title="消防监管部门审核意见" :value="detailform.fireQualifiedComments"></u-cell>
					<u-cell title="是否取得食品生产许可证" :value="detailform.foodQualified"></u-cell>
					<u-cell title="未取得食品生产许可证原因" :value="detailform.foodUnqualifiedReason"></u-cell>
					<u-cell title="食品监管部门审核意见" :value="detailform.foodQualifiedComments"></u-cell>
					<u-cell title="单位性质一级" :value="detailform.unitPropFirst"></u-cell>
					<u-cell title="单位性质二级" :value="detailform.unitPropSecond"></u-cell>
					<u-cell title="是否为特困救助供养机构" :value="detailform.isPovertyRelief"></u-cell>
					<u-cell title="是否为光荣院" :value="detailform.isGloriousHomes"></u-cell>
					<u-cell title="是否为街道（乡镇）区域性养老服务中心" :value="detailform.isCommunityCareCenter"></u-cell>
					<u-cell title="所处位置" :value="detailform.areaType"></u-cell>
					<u-cell title="兴办主体" :value="detailform.establishMainbody"></u-cell>
					<u-cell title="是否收住能力完好类型老年人" :value="detailform.haveCapability"></u-cell>
					<u-cell title="是否收住完全失能类型老年人" :value="detailform.haveTotalDisability"></u-cell>
					<u-cell title="是否收住部分失能类型老年人" :value="detailform.haveHalfDisability"></u-cell>
					<u-cell title="是否收住特困人员类型老年人" :value="detailform.haveSpecialDifficult"></u-cell>
					<u-cell title="是否收住残疾类型老年人" :value="detailform.haveDeformity"></u-cell>
					<u-cell title="是否收住优抚类型老年人" :value="detailform.haveSpecialCare"></u-cell>
					<u-cell title="是否收住其他类型老年人" :value="detailform.haveOther"></u-cell>
					<u-cell title="其它类型老年人" :value="detailform.haveOtherName"></u-cell>
					<u-cell title="是否投保责任险" :value="detailform.isLiabilityInsurance"></u-cell>
					<u-cell title="是否长护险定点机构" :value="detailform.isLongCareInsurance"></u-cell>
					<u-cell title="是否提供居家养老上门服务" :value="detailform.isAidService"></u-cell>
					<u-cell title="家庭养老床位服务" :value="detailform.isBedAid"></u-cell>
					<u-cell title="家庭养老床位服务服务人次/月" :value="detailform.bedAidCount"></u-cell>
					<u-cell title="上门助餐服务" :value="detailform.isMealAid"></u-cell>
					<u-cell title="上门助餐服务服务人次/月" :value="detailform.mealAidCount"></u-cell>
					<u-cell title="上门助洁服务" :value="detailform.isCleanAid"></u-cell>
					<u-cell title="上门助洁服务服务人次/月" :value="detailform.cleanAidCount"></u-cell>
					<u-cell title="上门助行服务" :value="detailform.isWalkAid"></u-cell>
					<u-cell title="上门助行服务服务人次/月" :value="detailform.walkAidCount"></u-cell>
					<u-cell title="上门助浴服务" :value="detailform.isBathAid"></u-cell>
					<u-cell title="上门助浴服务服务人次/月" :value="detailform.bathAidCount"></u-cell>
					<u-cell title="上门康复" :value="detailform.isRecoverAid"></u-cell>
					<u-cell title="上门康复服务人次/月" :value="detailform.recoverAidCount"></u-cell>
					<u-cell title="上门助医服务" :value="detailform.isMedicalAid"></u-cell>
					<u-cell title="上门助医服务服务人次/月" :value="detailform.medicalAidCount"></u-cell>
					<u-cell title="巡访关爱服务" :value="detailform.isVisitAid"></u-cell>
					<u-cell title="巡访关爱服务服务人次/月" :value="detailform.visitAidCount"></u-cell>
					<u-cell title="其他上门服务" :value="detailform.isOtherAid"></u-cell>
					<u-cell title="其他上门服务服务人次/月" :value="detailform.otherAidCount"></u-cell>
					<u-cell title="是否提供社区养老服务" :value="detailform.isCommunityCare"></u-cell>
					<u-cell title="日托日间照料" :value="detailform.isDayCare"></u-cell>
					<u-cell title="日托日间照料服务人次/月" :value="detailform.dayCareCount"></u-cell>
					<u-cell title="老年餐桌食堂" :value="detailform.isElderDinning"></u-cell>
					<u-cell title="老年餐桌食堂服务人次/月" :value="detailform.elderDinningCount"></u-cell>
					<u-cell title="社区文化娱乐" :value="detailform.isEntertainment"></u-cell>
					<u-cell title="社区文化娱乐服务人次/月" :value="detailform.entertainmentCount"></u-cell>
					<u-cell title="时间银行志愿服务" :value="detailform.isTimeBank"></u-cell>
					<u-cell title="时间银行志愿服务服务人次/月" :value="detailform.timeBankCount"></u-cell>
					<u-cell title="社区康复服务" :value="detailform.isCommunityRecover"></u-cell>
					<u-cell title="社区康复服务服务人次/月" :value="detailform.communityRecoverCount"></u-cell>
					<u-cell title="其他社区养老服务" :value="detailform.isOtherService"></u-cell>
					<u-cell title="其它服务名称" :value="detailform.otherServiceName"></u-cell>
					<u-cell title="其它服务服务人次/月" :value="detailform.otherServiceCount"></u-cell>
					<u-cell title="是否开展医疗服务" :value="detailform.isMedicalService"></u-cell>
					<u-cell title="是否内设医疗机构" :value="detailform.isMedicalInst"></u-cell>
					<u-cell title="自办医院" :value="detailform.isPrivateHospital"></u-cell>
					<u-cell title="护理站" :value="detailform.isNusringStation"></u-cell>
					<u-cell title="医务室" :value="detailform.isClinic"></u-cell>
					<u-cell title="是否与医疗机构签约合作（协议医疗保障）" :value="detailform.isMedicalContracted"></u-cell>
					<u-cell title="医院" :value="detailform.isHospital"></u-cell>
					<u-cell title="乡镇卫生院" :value="detailform.isTownHospital"></u-cell>
					<u-cell title="村社区卫生服务站中心" :value="detailform.isCommunityHospital"></u-cell>
					<u-cell title="是否取得医疗机构执业许可证书" :value="detailform.isMedicalCert"></u-cell>
					<u-cell title="是否取得医疗保险定点医疗机构资格证书" :value="detailform.isMedicalInsuranceUnit"></u-cell>
					<u-cell title="是否享受政府扶持优惠政策内容" :value="detailform.isGovernAssist"></u-cell>
					<u-cell title="税收优惠政策" :value="detailform.isTaxBreak"></u-cell>
					<u-cell title="建设补贴优惠政策" :value="detailform.isConstructBreak"></u-cell>
					<u-cell title="运营补贴优惠政策" :value="detailform.isOperaBreak"></u-cell>
					<u-cell title="土地划拨优惠政策" :value="detailform.isLandBreak"></u-cell>
					<u-cell title="行政事业收费减免优惠政策" :value="detailform.isAdminBreak"></u-cell>
					<u-cell title="居民用水用电价格优惠政策" :value="detailform.isWaterElecBreak"></u-cell>
					<u-cell title="收费方式" :value="detailform.chargeType"></u-cell>
					<u-cell title="是否采用会员制方式收费" :value="detailform.isMembership"></u-cell>
					<u-cell title="护理费最低-最高" :value="detailform.nursingLow"></u-cell>
					<u-cell title="床位费最低-最高" :value="detailform.bedLow"></u-cell>
					<u-cell title="膳食费最低-最高" :value="detailform.mealLow"></u-cell>
					<u-cell title="押金/备用金最低-最高" :value="detailform.depositLow"></u-cell>
					<u-cell title="是否其他收费" :value="detailform.fireQualifiedComments"></u-cell>
					<u-cell title="其他收费名称" :value="detailform.isOtherFee"></u-cell>
					<u-cell title="其他收费最低-最高" :value="detailform.otherFeeLow"></u-cell>
					<u-cell title="月末收住老年人数" :value="detailform.totalElders"></u-cell>
					<u-cell title="机构生存状态" :value="detailform.currentStatus"></u-cell>
					<u-cell title="是否备案" :value="detailform.isRecord"></u-cell>
					<u-cell title="备案时间" :value="detailform.recordDate"></u-cell> -->
				</u-cell-group>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import {
		QueryEnterInstInfoListAsync,
		// getEnterInstInfo,
		// addEnterInstInfo,
		// updateEnterInstInfo,
		// delEnterInstInfo
	} from "@/api/elder/queryEnter";

	import {
		iconObj,
	} from "@/static/icon/iconObj.js";

	export default {
		data() {
			return {
				showPopup: false,
				detailform: {
					"searchValue": null,
					"createBy": null,
					"createTime": null,
					"updateBy": "admin",
					"updateTime": "2023-03-17 02:05:00",
					"remark": null,
					"id": "68c481a5ea8d3a14b73788a06d4c05b5",
					"taxId": "52141182MJ18302673",
					"enterInstType": "",
					"enterInstName": "汾阳市东南老年公寓",
					"establishDate": "Wed May 07 00:00:00 CST 2008",
					"areaCode": "",
					"areaName": "山西省吕梁市汾阳市",
					"instAdd": "山西省 吕梁市 汾阳市汾阳市南二环路东南小区对面",
					"instLev": "",
					"principal": "郭仲雄",
					"principalContact": "13593397788",
					"principalCredType": "内地居民身份证",
					"principalCredId": "142321196211110030",
					"principalRegBureau": "汾阳市民政局",
					"principalType": "民办非企业法人",
					"totalCareBeds": 87,
					"dayCareBeds": 10,
					"nursingBeds": 35,
					"totalBeds": 97,
					"structionArea": 4161.76,
					"coveredArea": 10000,
					"placeProp": "政府产权",
					"fireQualified": "是",
					"fireUnqualifiedReason": "",
					"fireQualifiedComments": "",
					"foodQualified": "是",
					"foodUnqualifiedReason": "",
					"foodQualifiedComments": "",
					"unitPropFirst": "社会组织",
					"unitPropSecond": "民办非企业单位",
					"isPovertyRelief": "是",
					"isGloriousHomes": "否",
					"isCommunityCareCenter": "是",
					"areaType": "城区",
					"establishMainbody": "村委会或居委会",
					"haveCapability": "是",
					"haveTotalDisability": "是",
					"haveHalfDisability": "是",
					"haveSpecialDifficult": "是",
					"haveDeformity": "是",
					"haveSpecialCare": "是",
					"haveOther": "是",
					"haveOtherName": "无",
					"isLiabilityInsurance": "是",
					"isLongCareInsurance": "是",
					"isAidService": "否",
					"isBedAid": "否",
					"bedAidCount": 0,
					"isMealAid": "否",
					"mealAidCount": 0,
					"isCleanAid": "否",
					"cleanAidCount": 0,
					"isWalkAid": "否",
					"walkAidCount": 0,
					"isBathAid": "否",
					"bathAidCount": 0,
					"isRecoverAid": "否",
					"recoverAidCount": 0,
					"isMedicalAid": "否",
					"medicalAidCount": 0,
					"isVisitAid": "否",
					"visitAidCount": 0,
					"isOtherAid": "否",
					"otherAidCount": 0,
					"isCommunityCare": "否",
					"isDayCare": "否",
					"dayCareCount": 0,
					"isElderDinning": "否",
					"elderDinningCount": 0,
					"isEntertainment": "否",
					"entertainmentCount": 0,
					"isTimeBank": "否",
					"timeBankCount": 0,
					"isCommunityRecover": "否",
					"communityRecoverCount": 0,
					"isOtherService": "否",
					"otherServiceName": "",
					"otherServiceCount": 0,
					"isMedicalService": "是",
					"isMedicalInst": "是",
					"isPrivateHospital": "否",
					"isNusringStation": "否",
					"isClinic": "是",
					"isMedicalContracted": "是",
					"isHospital": "否",
					"isTownHospital": "否",
					"isCommunityHospital": "是",
					"isMedicalCert": "否",
					"isMedicalInsuranceUnit": "否",
					"isGovernAssist": "是",
					"isTaxBreak": "是",
					"isConstructBreak": "否",
					"isOperaBreak": "是",
					"isLandBreak": "否",
					"isAdminBreak": "是",
					"isWaterElecBreak": "是",
					"chargeType": "其他",
					"isMembership": "否",
					"nursingUp": 0,
					"nursingLow": 0,
					"bedUp": 850,
					"bedLow": 550,
					"mealUp": 300,
					"mealLow": 300,
					"depositUp": 1000,
					"depositLow": 1000,
					"isOtherFee": "否",
					"otherFeeName": "",
					"otherFeeLow": 0,
					"otherFeeUp": 0,
					"totalElders": 90,
					"currentStatus": "正常营业",
					"isRecord": "是",
					"recordDate": "2021-09-01",
					"lng": 111.78671542563445,
					"lat": 37.25850354393451,
					"instImg": "",
					"delFlag": "0",
					"latitude": 37.25850354393451,
					"longitude": 111.78671542563445,
					"title": "汾阳市东南老年公寓",
					"label": {
						"content": "汾阳市东南老年公寓",
						"fontSize": 14
					}
				},
				title: '标题',
				checkedList: ["敬老院", "城市养老院", "农村养老院"],
				TotalPoints: [], //所有的点
				points: [], //转换过的点
				latitude: 37.524957, //纬度
				longitude: 111.146425, //经度
				scale: 11, //缩放级别
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					}
				],
			}
		},
		onLoad() {
		},
		onShow() {
			this.loadPoints() //请求机构信息
		},
		computed: {
			markers() {
				if (this.points.length > 0) {
					//根据checkedList自动筛选符合的点进行展示
					return this.$_.filter(this.points, (o) => {
						return this.checkedList.some((i) => {
							if (i == "敬老院") {
								return o.instLev.indexOf("敬老院") > -1
							} else {
								return i == o.instLev
							}
						});
					});
				} else {
					return []
				}
			},
			numberofJLY() {
				if (this.points.length > 0) {
					//根据checkedList自动筛选符合的点进行展示
					return "敬老院" + "(" + this.$_.filter(this.points, (o) => {
						return o.instLev.indexOf("敬老院") > -1
					}).length + ")"
				} else {
					return "敬老院" + "(" + 0 + ")"
				}
			},
			numberofCSYLY() {
				if (this.points.length > 0) {
					//根据checkedList自动筛选符合的点进行展示
					return "城市养老院" + "(" + this.$_.filter(this.points, (o) => {
						return o.instLev == "城市养老院"
					}).length + ")"
				} else {
					return "城市养老院" + "(" + 0 + ")"
				}
			},
			numberofNCYLY() {
				if (this.points.length > 0) {
					//根据checkedList自动筛选符合的点进行展示
					return "农村养老院" + "(" + this.$_.filter(this.points, (o) => {
						return o.instLev == "农村养老院"
					}).length + ")"
				} else {
					return "农村养老院" + "(" + 0 + ")"
				}
			},
		},
		methods: {
			loadPoints() {
				QueryEnterInstInfoListAsync({
					pageNum: 1,
					pageSize: 1000,
				}, {
					"queryParam": {},
					//"order": "ascending",
					"sort": "updateTime"
				}).then(response => {
					console.log('response', response)
					this.TotalPoints = response.rows;
					this.setPoints();
				});
			},
			setPoints() {
				this.points = [];
				this.TotalPoints.map(item => {
					item.latitude = item.lat;
					item.longitude = item.lng;
					item.title = item.enterInstName;
					item.label = { //自定义标记点上方的气泡窗口 点击有效  
						content: item.enterInstName, //文本
						//color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						// borderRadius: 15, //边框圆角
						// borderWidth: '10',
						// bgColor: '#e51860', //背景颜色
						// display: 'ALWAYS', //常显
					};
					// item.callout = { //自定义标记点上方的气泡窗口 点击有效  
					// 	content: item.enterInstName, //文本
					// 	//color: '#ffffff', //文字颜色
					// 	fontSize: 14, //文本大小
					// 	// borderRadius: 15, //边框圆角
					// 	// borderWidth: '10',
					// 	// bgColor: '#e51860', //背景颜色
					// 	// display: 'ALWAYS', //常显
					// }

					if (item.instLev.indexOf("敬老院") > -1) {
						item.iconPath = '/static/icon/location_red_64.png'
					} else if (item.instLev == "城市养老院") {
						item.iconPath = '/static/icon/location_blue_64.png'
					} else if (item.instLev == "农村养老院") {
						item.iconPath = '/static/icon/location_green_64.png'
					}
					this.points.push(item);
				});
				// console.log('points', this.points)
				console.log('points', this.points)
				console.log('markers', this.markers)
			},

			handle_checkedList_change(list) {
				console.log('list', list)
			},
			//地图标记点点击事件
			markertap(e) {
				this.detailform = this.points.find(i => i.id == e.detail.markerId)
				this.showPopup = true;
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			handle_modal_close(e) {
				this.showPopup = false;
			}
		}
	}
</script>
<style lang='less' scoped>
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			color: #484848;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			bottom: 100rpx;
			right: 32rpx;
		}

		.cover-image {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>